import { FC } from 'react'
import { ProCard } from '@ant-design/pro-components'
import { Image, Row, Col, Carousel, Table, Space } from 'antd'
import { FileTextTwoTone, CheckCircleTwoTone, AlertTwoTone } from '@ant-design/icons'
import homePic from '@/assets/home.png'
import zhuzPic1 from '@/assets/home1.png'
import zhuzPic2 from '@/assets/home5.png'
import zhuzPic3 from '@/assets/home3.png'
import zhuzPic4 from '@/assets/home4.png'
import styles from './index.less'
const Home: FC = () => {
  return (
    <div className={styles.ContentStyles}>
      <ProCard split={'vertical'}>
        <ProCard split={'horizontal'} bordered>
          <ProCard>
            <Image src={homePic}></Image>
          </ProCard>
          <ProCard title="通知" split={'horizontal'} className={styles.NoticeStyles} type={'inner'}>
            <ProCard>
              <FileTextTwoTone />
              学生名单更新
            </ProCard>
            <ProCard>
              <CheckCircleTwoTone />
              《浮力》课程分析已经完成
            </ProCard>
            <ProCard>
              <AlertTwoTone />
              学生请求加入班级
            </ProCard>
          </ProCard>
        </ProCard>
        <ProCard split={'horizontal'} title="课程总览">
          <ProCard split={'horizontal'}>
            <ProCard
              split={'vertical'}
              gutter={[90, 16]}
              style={{ marginTop: '10px', marginBottom: '10px' }}
              bordered
              type={'inner'}
            >
              <ProCard
                style={{ marginLeft: '60px' }}
                bodyStyle={{
                  backgroundColor: '#4877fb',
                  height: '140px',
                  color: 'white',
                  marginTop: '5px'
                }}
                bordered
                colSpan={'45%'}
                hoverable
              >
                <div style={{ fontSize: '20px' }}>已分析课程</div>
                <div style={{ fontSize: '50px' }}>35</div>
              </ProCard>
              <ProCard
                bodyStyle={{
                  backgroundColor: '#4877fb',
                  height: '140px',
                  color: 'white',
                  marginTop: '5px'
                }}
                bordered
                colSpan={'45%'}
                hoverable
              >
                <div style={{ fontSize: '20px' }}>未分析课程</div>
                <div style={{ fontSize: '50px' }}>25</div>
              </ProCard>
            </ProCard>
            <ProCard
              title="全部课程"
              bodyStyle={{ fontSize: '30px', fontWeight: 'bold', marginBottom: '10px' }}
              bordered
              headerBordered
            >
              65
            </ProCard>
          </ProCard>
          <ProCard split={'horizontal'} className={styles.RightBottom}>
            <Space size={[30, 10]} key="space1" wrap>
              <Image src={zhuzPic1}></Image>
              <Image src={zhuzPic2}></Image>
              <Image src={zhuzPic3}></Image>
              <Image src={zhuzPic4}></Image>
            </Space>
          </ProCard>
        </ProCard>
      </ProCard>
    </div>
  )
}
export default Home
